<template>
    <Tabbar />
    <view class=" absolute w-full h-[80vh] flex flex-col  items-center  mt-15">
        <Back :title="'公司历程'" />
        <view class="w-full h-full flex flex-row items-center justify-center">
            <view class="w-1/2 h-[48vh]" style="background-color: #000;" @tap="doPlaying()">
                <view class="w-1/2 h-[36vh] absolute top-240 left-0 flex justify-center items-center z-10">
                </view>
                <image :src="companyData.CompanyProfile[3].videoPoster" mode="scaleToFill"
                    class="w-1/2 h-[50vh] absolute top-220 left-0 flex justify-center items-center z-10"
                    v-show="showPoster" />
                <view
                    class="text-white font-bold text-lg absolute bottom-220 left-[20%] flex justify-center items-center text-center  z-10 w-[200rpx] h-[100rpx]  bg-[#7B7D81] opacity-80 rounded-full"
                    v-show="noShowButton">点击播放</view>
                <DomVideoPlayer ref="domVideoPlayer" :src="companyData.CompanyProfile[3].video" :controls="true"
                    :enable-progress-gesture="false" class="w-full h-auto">
                </DomVideoPlayer>
            </view>
            <view class="w-1/2 h-[80vh] flex flex-col pb-7 justify-center items-center">
                <view class="w-full flex text-left justify-start items-center">时间轴线</view>
                <swiper class="w-full h-[58vh] " :display-multiple-items="1" :autoplay="false" :circular="false"
                    :indicator-dots="false" indicator-color="#fff" indicator-active-color="#2196F3">
                    <swiper-item v-for="(listItem, listIndex) in companyData.CompanyProfile[3].swiperData"
                        :key="listIndex">
                        <view class="flex flex-row justify-center items-center">
                            <view class="w-full h-[57vh] flex flex-col justify-center items-center bg-white"
                                style="background: rgba(255, 255, 255, 0);">
                                <view class="text-center w-full text-30 text-left text-50 text-[#4963BB]">{{
                                    companyData.CompanyProfile[3].yearList[listIndex].year }}</view>
                                <image :src="listItem.image" mode="aspectFit" class="w-full h-full"
                                    @click=" preview(listItem.image)" />
                                <view class="text-center w-full text-30 text-[#4963BB]">{{
                                    companyData.CompanyProfile[3].yearList[listIndex].text }}</view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <q-previewImage ref="previewImage" :urls="list"></q-previewImage>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onPageScroll, onReachBottom, onShow, onHide } from '@dcloudio/uni-app'
import Tabbar from '@/components/Tabbar/tabbar.vue'
import Back from '@/components/Back/Back.vue'
import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'
import Swiper from '@/components/Swiper/index.vue'
import { companyData } from './data'

/**
 * @desc 监测swipe页码变化的方法
 */
function change(e: any) {
}

const list = computed(() => { return companyData.CompanyProfile[3].swiperData.map((item: any) => item.image) })

const previewImage = ref<any>(null)
const preview = (url: any) => {
    previewImage.value.open(url); // 传入当前选中的图片地址
};

const domVideoPlayer = ref<any>(null)
const noShowButton = ref(true)
const showPoster = ref(1)
const doPlaying = () => {
    showPoster.value = 0
    if (domVideoPlayer.value.playing) {
        doPause()
    } else {
        doPlay()
    }
}
const doPlay = () => {
    domVideoPlayer.value.play()
    noShowButton.value = false
}

const doPause = () => {
    domVideoPlayer.value.pause()
    noShowButton.value = true
}

const goPage = (url: string) => {
    uni.navigateTo({
        url
    })
}

onHide(() => {
    showPoster.value = 1
    noShowButton.value = true
})



onMounted(() => {
})
</script>

<style scoped>
.box-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
}

.period-b {
  background-color: #ECF5FF;
  color: #1684FC;
}

.period-n {
  background-color: #F6F6F6;
  color: #B0B7C2;
}
</style>
